CSS3主要内容

一、CSS选择器

CSS3选择器规范地址： https://www.w3.org/TR/2011/RE...
CSS3最新选择器规范: https://www.w3.org/TR/selectors

!---问题---!

1.CSS的全称是什么？
Cascading Style Sheets

2.样式表的组成：
CSS选择器 + CSS声明块：（一个个CSS声明：属性名+属性值）

3.浏览器读取编译CSS的顺序？
CSS选择器的解析顺序：从右往左。这样做是为了减少无效匹配次数，从而匹配快、性能更优。

1.基本选择器`*`,`html`,`.`,`#`,`空格`,`>`,`+`,`~`,`,`

（1）通配符选择器：* {}
（2）元素选择器：body {}任何一个HTML元素
（3）类选择器：. .list {}
（4）ID选择器：# #list {}
（5）后代选择器：空格 .list li{}
（6）选择器的分组：用逗号,隔开各个选择器
h1,h2,h3{color: pink;} 此处的逗号我们称之为结合符
基本选择器扩展
- （7）子元素选择器：>，也可称为直接后代选择器,此类选择器只能匹配到直接后代，不能匹配到深层次的后代元素。
  #wrap > .inner {color: pink;}
- （8）相邻兄弟选择器：+，它只会匹配紧跟着的兄弟元素。
  #wrap #first + .inner {color: #f00;}
- （9）通用兄弟选择器：~，它会匹配所有的兄弟元素(不需要紧跟)。
  #wrap #first ~ div { border: 1px solid;}

2.属性选择器

（1）存在和值属性选择器
[attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。
[attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。
[attr~=val]：该选择器仅选择 attr 属性的值（以空格间隔出多个值）中有包含 val 值的所有元素，比如位于被空格分隔的多个类（class）中的一个类。

（2）子串值属性选择器
[attr|=val] : 选择attr属性的值是val（包括val）或以val-开头的元素。
[attr^=val] : 选择attr属性的值以val开头（包括val）的元素。
[attr$=val] : 选择attr属性的值以val结尾（包括val）的元素。
[attr*=val] : 选择attr属性的值中包含字符串val的元素。

3.伪类与伪元素选择器

（1）链接伪类：注意:link，:visited，:target是作用于链接元素的！
:link：表示作为超链接，并指向一个未访问的地址的所有锚。
:visited：表示作为超链接，并指向一个已访问的地址的所有锚。
:target：代表一个特殊的元素，它的id是URI的片段标识符。

（2）动态伪类 : 注意:hover，:active基本可以作用于所有的元素！
:hover : 表示悬浮到元素上。
:active : 表示匹配被用户激活的元素（点击按住时）。
由于a标签的:link和:visited可以覆盖了所有a标签的状态，所以当:link，:visited，:hover，:active同时出现在a标签身上时 :link和:visited不能放在最后！！！

隐私与:visited选择器:只有下列的属性才能被应用到已访问链接：
color
background-color
border-color

（3）表单相关伪类
:enabled：匹配可编辑的表单
:disable：匹配被禁用的表单
:checked：匹配被选中的表单
:focus：匹配获焦的表单

（4）结构性伪类
index的值从1开始计数！！！！
index可以为变量n(只能是n)
index可以为even、 odd
#wrap ele:nth-child(index)：表示匹配#wrap中第index的子元素这个子元素必须是ele
#wrap ele:nth-of-type(index)：表示匹配#wrap中第index的ele子元素
除此之外:nth-child和:nth-of-type有一个很重要的区别！！:nth-of-type以元素为中心！！！

:nth-child(index)系列
- :first-child
- :last-child
- :nth-last-child(index)
- :only-child(相对于:first-child:last-child 或者 :nth-child(1):nth-last-child(1))
:nth-of-type(index)系列
- :first-of-type
- :last-of-type
- :nth-last-type(index)
- :only-of-type (相对于:first-of-type:last-of-type 或者 :nth-of-type(1):nth-last-of-type(1))
- :not
- :empty(内容必须是空的，有空格都不行，有attr没关系)

（5）伪元素

::after
::before
::firstLetter
::firstLine
::selection

4.`CSS`声明的优先级

（1）选择器的特殊性
选择器的特殊性由选择器本身的组件确定，特殊性值表述为4个部分，如0,0,0,0
一个选择器的具体特殊性如下确定：

1.对于选择器中给定的ID属性值，加 0,1,0,0
2.对于选择器中给定的各个类属性，属性选择，或伪类，加 0,0,1,0
3.对于选择器中的给定的各个元素和伪元素，加0,0,0,1
4.通配符选择器的特殊性为0,0,0,0
5.结合符对选择器特殊性没有一点贡献
6.内联声明的特殊性都是1,0,0,0
7.继承没有特殊性

特殊性 1,0,0,0 大于所有以0开头的特殊性(不进位)

选择器的特殊性最终都会授予给其对应的声明

如果多个规则与同一个元素匹配，而且有些声明互相冲突时，特殊性越大的越占优势

注意区分：id选择器和属性选择器
div[id="test"]（0,0,1,1）和 #test（0,1,0,0）

（2）重要声明

有时某个声明比较重要，超过了所有其他声明，css2.1就称之为重要声明，并允许在这些声明的结束分号之前插入!important 来标志。
必须要准确的放置 !important 否则声明无效。
!important 总是要放在声明的最后，即分号的前面。
标志为 !important的声明并没有特殊的特殊性值，不过要与非重要声明分开考虑。
实际上所有的重要声明会被浏览器分为一组，重要声明的冲突会在其内部解决。
非重要声明也会被分为一组，非重要声明的冲突也会在其内部解决。
如果一个重要声明与非重要声明冲突，胜出的总是重要声明。

（3）继承

继承没有特殊性，甚至连0特殊性都没有。
0特殊性要比无特殊性来的强。

（4）来源

CSS样式的来源大致有三种：
- 创作人员
- 读者
- 用户代理
权重：
- 读者的重要声明
- 创作人员的重要声明
- 创作人员的正常声明
- 读者的正常声明
- 用户代理的声明

（5）层叠

1.找出所有相关的规则，这些规则都包含一个选择器。
2.计算声明的优先级
- 先按来源排序
- 再按选择器的特殊性排序
- 最终按顺序

二、自定义字体

@font-face：允许网页开发者为其网页指定在线字体。
通过这种作者自备字体的方式，可以消除对用户电脑字体的依赖。
font-family：所指定的字体名字将会被用于font或font-family属性。
src：字体资源。

注意:不能在一个 CSS 选择器中定义@font-face。

三、新的UI方案

1.文本新增样式

（1）opacity

opacity属性指定了一个元素的透明度。
默认值：1.0 ，不可继承。

（2）新增颜色样式rgba

（3）文字阴影(text-shadow)

text-shadow用来为文字添加阴影，而且可以添加多层，阴影值之间用逗号隔开。（多个阴影时，第一个阴影在最上边）
默认值：none ，不可继承。

（4）文字描边(-webkit-text-stroke)

只有webkit内核才支持：-webkit-text-stroke（准确的来说不能算是CSS3的东西，但需要知道）。

（5）文字排版

direction:控制文字的方向，一定要配合unicode-bidi:bidi-override;来使用。
text-overflow :确定如何向用户发出未显示的溢出内容信号。
- 它可以被剪切，
- 显示一个省略号（'...'）

2.盒模型新增样式

（1）盒模型阴影box-shadow

box-shadow
以逗号分割列表来描述一个或多个阴影效果，可以用到几乎任何元素上。如果元素同时设置了 border-radius ，阴影也会有圆角效果。多个阴影时和多个 text-shadows 规则相同(第一个阴影在最上面)。
默认值: none ，不可继承。

（2）倒影-webkit-box-reflect

-webkit-box-reflect 设置元素的倒影（准确的来说不能算是CSS3的东西，但需要知道）。
默认值:none，不可继承。

（3）resize

resize CSS 属性允许你控制一个元素的可调整大小性。
（一定要配合overflow：auto使用）
默认值：none，不可继承。

（4）box-sizing

box-sizing 属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行/列为。
默认值：content-box，不可继承。

3.新增UI样式

（1）圆角border-radius

border-radius
默认值：0，不可继承。

（2）边框图片border-image

border-image： CSS属性允许在元素的边框上绘制图像。这使得绘制复杂的外观组件更加简单，使用 border-image 时，其将会替换掉 border-style 属性所设置的边框样式。
默认值：不可继承
- border-image-source: none
- border-image-slice: 100%
- border-image-width: 1
- border-image-outset: none
- border-image-repeat: stretc

（3）背景background

（4）渐变

CSS 渐变是在 CSS3 Image Module 中新增加的图片类型；使用 CSS渐变可以在两种颜色间制造出平滑的渐变效果. 用它代替图片，可以加快页面的载入时间、减小带宽占用。同时，因为渐变是由浏览器直接生成的，它在页面缩放时的效果比图片更好，因此你可以更加灵活、便捷的调整页面布局。
浏览器支持两种类型的渐变：
- 线性渐变 (linear)，通过 linear-gradient 函数定义
- 径向渐变 (radial)，通过 radial-gradient 函数定义.

四、布局扩展

1.`flex`布局

CSS3 弹性盒子(Flexible Box 或 Flexbox)，是一种用于在页面上布置元素的布局模式，使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行/列。对于许多应用程序，弹性盒子模型提供了对块模型的改进，因为它不使用浮动，flex容器的边缘也不会与其内容的边缘折叠。

弹性盒模型，分老版与新版：

老版本的我们通常称之为`box `  
新版本的我们通常称之为`flex`

主轴与侧轴

由`flex-direction`/`-webkit-box-orient`确定

有了新版本后，为什么还需要老版本？（新版本比老版本要强大的很多）

很多移动端浏览器内核版本都超低。

（1）老版
容器设置display为webkit-box
（注意:项目永远是在主轴上排列的）

-webkit-box-orient属性本质上确定了主轴是哪一根
- horizontal:x轴
- vertical:y轴

（注意:项目永远是沿着主轴的正方向排列的）

-webkit-box-direction属性本质上改变了主轴的方向
- -webkit-box-direction: normal;
- -webkit-box-direction: reverse;
富裕空间的管理（主轴）
- start
- end
- center
- justify
- -webkit-box-pack:start;
  不会给项目区分配空间，只是确定富裕空间的位置
富裕空间的管理（侧轴）
- start
- end
- center
- -webkit-box-align:center;
  不会给项目区分配空间，只是确定富裕空间的位置
弹性空间的管理：将富裕空间按比例分配到各个项目上
- -webkit-box-flex: 1;
- 默认值:0 ，不可继承

（2）新版

容器的布局方向
- flex-direction: row;
- flex-direction: column;
容器的排列方向
- flex-direction:row-reverse;
- flex-direction:column-reverse;
更强大的富裕空间的管理（主轴）
- justify-content: flex-start;
- flex-start
- flex-end
- center
- space-between
- space-around(box 没有的)
更强大的富裕空间的管理（侧轴）
- align-items: stretch;
- flex-start
- flex-end
- center
- baseline(box 没有的)
- stretch(box 没有的)
弹性空间的管理
- flex-grow: 1

2.新版`flex`布局详解

https://developer.mozilla.org...

3.响应式布局核心：媒体查询选择器

CSS3媒体查询是响应式方案核心。

（1）媒体类型

all：所有媒体
braille：盲文触觉设备
embossed：盲文打印机
print：手持设备
projection：打印预览
screen：彩色屏幕
speech： “听觉”类似的媒体设备
tty：不适用像素的设备
tv：电视

（2）媒体特性（媒体属性）

width （可加max min前缀）
height （可加max min前缀）
min-width：分辨率宽度大于设置值的时候识别
max-width：分辨率宽度小于设置值的时候识别
device-width （可加max min前缀）
device-pixel-ratio：像素比（可加max min前缀，需要加webkit前缀）
orientation：portrait ：竖屏
orientation：landscape：横屏

（3）操作符、关键字

and：连接媒体特性
- 连接媒体属性、连接媒体类型
- 对于所有的连接选项都要匹配成功才能应用规则
or : 和and相似
- 对于所有的连接选项只要匹配成功一个就能应用规则
not：排除指定媒体类型
only：指定某种特定的媒体类型
- 防止老旧的浏览器不支持带媒体属性的查询而应用到给定的样式。

@media only screen and (min-width:800px ){
        规则；
        规则
}

@media  screen and (min-width:800px ){

        规则；
        规则
}

- 在老款的浏览器下
- @media only ---> 因为没有only这种设备，规则被忽略。
- @media screen ---> 因为有screen这种设备而且老浏览器会忽略带媒体属性的查询。
- 建议在每次书写media query的时候带上only。

4.多列布局（分栏布局）

（1）栏目宽度

column-width指定每一栏的宽度（这是多列布局的第一种分法）

（2）栏目列数

column-count指定要多少栏（这是多列布局的第二种分法）

（3）栏目距离

column-gap

（4）栏目间隔线

column-rule

CSS3主要内容